<template>
  <div>
    <el-form
      ref="formRef"
      :model="paramsObj"
      :rules="rules"
      label-position="right"
      class="lineHeight32"
      label-width="90px"
      @submit.native.prevent>
      <div class="customer-form">
        <Title title="退款单" style="margin-bottom: 16px;"/>
        <el-row type="flex" class="response-el-row">
          <el-col :span="12" class="responsive-col-lg-8 indentation-form-item">
            <el-form-item label="退货编号(淘宝)" prop="taobaoSn">
              <el-input v-model.trim="paramsObj.taobaoSn" :maxlength="50" :disabled="disabled" placeholder="请输入退货编号(淘宝)" size="small" class="width240" type="text"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8 indentation-form-item">
            <el-form-item label="交易金额(元)" prop="payAmount">
              <el-input
                v-model.trim="paramsObj.payAmount"
                :disabled="disabled"
                oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                name="cost"
                type="number"
                placeholder="请输入交易金额"
                size="small"
                class="width240"
                @change="numInputChange($event, 'payAmount')"
                @mousewheel.native.prevent />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8">
            <el-form-item label="退款状态" prop="refundsStatus" class="client-type">
              <el-select v-model="paramsObj.refundsStatus" :disabled="disabled" size="small" placeholder="请选择退款状态" class="width240" popper-class="global-select-down">
                <el-option
                  v-for="item in refundsStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8">
            <el-form-item label="订单编号" prop="orderNum">
              <el-input
                v-model.trim="paramsObj.orderNum"
                :maxlength="50"
                :disabled="disabled"
                placeholder="请输入订单编号"
                size="small"
                class="width240"
                type="text"
                clearable>
                <el-button slot="append" icon="el-icon-search" class="icon-search" @click="searchOrderNum('')" />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8 indentation-form-item">
            <el-form-item label="退款金额(元)" prop="backAmount">
              <el-input
                v-model.trim="paramsObj.backAmount"
                :disabled="disabled"
                oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                name="cost"
                type="number"
                placeholder="请输入退款金额"
                size="small"
                class="width240"
                @change="numInputChange($event, 'backAmount')"
                @mousewheel.native.prevent />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8">
            <el-form-item label="退货状态" prop="returnsStatus" class="client-type">
              <el-select v-model="paramsObj.returnsStatus" :disabled="disabled" size="small" placeholder="请选择退货状态" class="width240" popper-class="global-select-down">
                <el-option
                  v-for="item in returnGoodsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8">
            <el-form-item label="SKU编码" prop="goodsCoding">
              <el-select
                v-model="paramsObj.goodsCoding"
                :disabled="disabled"
                size="small"
                placeholder="请选择SKU编码"
                class="width240"
                popper-class="global-select-down"
                no-data-text="请先输入系统存在的电商销售订单编号"
                clearable
                @change="selectGoodsCoding">
                <el-option
                  v-for="item in goodsInfo"
                  :key="item.id"
                  :label="item.goodsCoding+`(${item.warehouse})`"
                  :value="item.goodsCoding+'+'+item.warehouseId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8 indentation-form-item">
            <el-form-item label="退货商品数量" prop="number">
              <el-input
                v-model.trim="paramsObj.number"
                :maxlength="50"
                :disabled="disabled"
                oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                placeholder="请输入退货商品数量"
                size="small"
                class="width240"
                type="text"
                clearable
                @input="valToPureNum($event)"/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8">
            <el-form-item label="货物状态" prop="goodsStatus" class="client-type">
              <el-select v-model="paramsObj.goodsStatus" :disabled="disabled" size="small" placeholder="请选择货物状态" class="width240" popper-class="global-select-down">
                <el-option
                  v-for="item in goodsStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8">
            <el-form-item label="标题" prop="title">
              <el-input v-model.trim="paramsObj.title" :maxlength="50" :disabled="disabled" placeholder="请输入标题" size="small" class="width240" type="text" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8">
            <el-form-item label="原因" prop="reason">
              <el-input v-model.trim="paramsObj.reason" :maxlength="500" :disabled="disabled" placeholder="请输入原因" size="small" class="width240" type="text" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="responsive-col-lg-8 indentation-form-item">
            <el-form-item label="部分退款/全部退款" prop="partialOrFullrefund" class="client-type">
              <el-select v-model="paramsObj.partialOrFullrefund" :disabled="disabled" size="small" placeholder="请选择" clearable class="width240" popper-class="global-select-down">
                <el-option
                  v-for="item in rebatesOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { getGoodsInfo } from '@/api/mengli';
import ElMessage from '@/utils/message';

export default {
  components: { Title },
  model: {
    prop: 'paramsObj',
    event: 'change'
  },
  props: {
    paramsObj: {
      type: Object,
      default() {
        return {};
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      refundsStatusOptions: [
        { value: 0, label: '进行中的订单' },
        { value: 1, label: '退款待处理' },
        { value: 2, label: '已拒绝退款' },
        { value: 3, label: '待买家发货' },
        { value: 4, label: '待商家收货' },
        { value: 5, label: '退款关闭' },
        { value: 6, label: '退款成功' },
        { value: 7, label: '退款完结' }
      ],
      returnGoodsOptions: [
        { value: 0, label: '仅退款' },
        { value: 1, label: '退货退款' },
        { value: 2, label: '维修换货' }
      ],
      goodsStatusOptions: [
        { value: 0, label: '未发货' },
        { value: 1, label: '未收到发货' },
        { value: 2, label: '已收到货' },
        { value: 3, label: '已寄回' }
      ],
      rebatesOptions: [
        { value: 0, label: '部分退款' },
        { value: 1, label: '全部退款' },
        { value: 2, label: '拒绝退款' },
        { value: 3, label: '其他' }
      ],
      rules: {
        taobaoSn: [{ required: true, trigger: 'blur', message: '请输入退货编号(淘宝)' }],
        payAmount: [{ required: true, trigger: 'blur', message: '请输入交易金额' }],
        orderNum: [{ required: true, trigger: 'blur', message: '请输入订单编号' }],
        backAmount: [{ required: true, trigger: 'blur', message: '请输入退款金额' }],
        refundsStatus: [{ required: true, trigger: 'change', message: '请选择退款状态' }],
        returnsStatus: [{ required: true, trigger: 'change', message: '请选择退货状态' }],
        goodsStatus: [{ required: true, trigger: 'change', message: '请选择货物状态' }]
      },
      goodsInfo: []
    };
  },
  methods: {
    numInputChange(text, prop) {
      if (['backAmount', 'payAmount'].includes(prop) && (Number(this.paramsObj['backAmount']) > Number(this.paramsObj['payAmount']))) {
        this.$set(this.paramsObj, 'backAmount', this.paramsObj['payAmount']);
        ElMessage.warning('退款金额不能大于交易金额！');
        return;
      }
      let str = text.replace(/[^\d.]/g, ''); // 只允许数字
      str = str.replace(/\.{2,}/g, '.'); // 连续两个小数点 replace为.
      str = str.replace(/^\./g, '0.'); // 已点为开头 replace为 0.
      str = str.replace(/^(\d*)\.(\d*)\./g, '$1.$2');// 不连续点点 删掉
      str = str.replace(/^0[^\.]+/g, '0'); // 连续多个0 replace为1个0
      str = str.replace(/^(\d+)\.(\d\d).*$/, '$1.$2'); // 只允许保留小数点后3位
      this.paramsObj[prop] = str;
    },
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs['formRef'].validate().then(() => {
          resolve();
        }).catch(() => {
          reject();
        });
      });
    },
    searchOrderNum(data) {
      this.goodsInfo = [];
      this.paramsObj.goodsCoding = null;
      this.resetSku();
      if (!this.paramsObj.orderNum && !data) {
        ElMessage.warning('请先输入订单编号！');
        return;
      }
      getGoodsInfo(this.paramsObj.orderNum || data).then(res => {
        this.goodsInfo = res.data && (res.data.goodsInfo || []);
        this.goodsInfo.length > 0 && ElMessage.success('已找到订单关联的SKU编码！');
        this.goodsInfo.length === 0 && ElMessage.warning('该订单编号没有关联SKU编码，请先去该电商销售单关联SKU！');
      }).catch(err => {
        console.log(err);
      });
    },
    resetSku() {
      this.paramsObj.warehouseId = null;
      this.paramsObj.warehouse = '';
      this.paramsObj.cost = null;
    },
    selectGoodsCoding(val) {
      if (val) {
        const temp = this.goodsInfo.filter(item => {
          return (item.goodsCoding + '+' + item.warehouseId) === val;
        });
        this.paramsObj.warehouseId = temp[0].warehouseId;
        this.paramsObj.warehouse = temp[0].warehouse;
        this.paramsObj.cost = temp[0].costPrice / 100;
      } else {
        this.resetSku();
      }
    },
    valToPureNum(val) {
      if (val) this.paramsObj.number = val.replace(/[^\d]/g, '');
    }
  }
};
</script>

<style lang="scss" scoped>
.customer-form{
  .width240{
    width: 240px;
  }
}
::v-deep .el-input-group__append {
  padding: 0 10px;
}
  .indentation-form-item {
    ::v-deep .el-form-item {
      label {
        line-height: 1.2 !important;
      }
    }
  }
.icon-search {
  padding: 10px;
  margin: -10px;
  &:hover{
    background-color: #406EFF;
    color: #fff;
    border-radius: 0 4px 4px 0;
  }
}
</style>
